<template>
  <div class="container">
    <div id="video-container" />
    <div class="control-board">
      <div class="h12" />
      <div style="padding:0 10px">
        <el-button
          class="btn btn-top"
          type="primary"
          icon="el-icon-caret-top"
          @click="ptzStart(0)"
        />
        <div>
          <el-button
            class="btn btn-middle-left"
            type="primary"
            icon="el-icon-caret-left"
            @click="ptzStart(2)"
          />
          <el-button
            class="btn btn-middle-center"
            type="primary"
            icon="el-icon-video-pause"
            @click="ptzStop"
          />
          <el-button
            class="btn btn-middle-right"
            type="primary"
            icon="el-icon-caret-right"
            @click="ptzStart(3)"
          />
        </div>
        <el-button
          class="btn btn-bottom"
          type="primary"
          icon="el-icon-caret-bottom"
          @click="ptzStart(1)"
        />
      </div>
      <div class="h20" />
      <div class="h20" />
      <div>
        <el-button class="btn" type="primary" icon="el-icon-zoom-in" @click="ptzStart(8)" />
        <el-button class="btn" type="primary" icon="el-icon-camera-solid" @click="capture" />
        <el-button class="btn" type="primary" icon="el-icon-zoom-out" @click="ptzStart(9)" />
      </div>
      <div class="h12" />
    </div>
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js'
import { liveAddress, ptzStart, ptzStop, capture } from '@/api/ys7'
import { mapGetters } from 'vuex'
import { dclassCodeMap } from '@/utils/constant'
export default {
  data() {
    return {
      livenessUrl: 'https://open.ys7.com/v3/openlive/D68898665_1_2.m3u8?expire=1663843121&id=362669391615893504&t=2694347af5fa81da14e415382532887da1ec0a29ebc83054b7cc302a9ca38c38&ev=100',
      serialno: 'D68898665',
      direction: 0,
      loading: false,
      player: '',
      accessToken: ''
    }
  },
  computed: {
    ...mapGetters(['currentDevice', 'currentDeviceShow'])
  },
  watch: {
    currentDeviceShow: {
      handler(newVal) {
        if (+(this.currentDevice.product_type) === +(dclassCodeMap.spjk)) {
          console.log(newVal)
          if (!newVal) {
            this.player.stop()
            this.player = ''
          } else {
            this.serialno = this.currentDevice.serialno
            this.liveAddress()
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.serialno = this.currentDevice.serialno
    this.liveAddress()
  },
  methods: {
    async liveAddress() {
      const params = {
        serialno: this.serialno,
        protocol: 2,
        expireTime: 604800
      }
      const { data, errorCode } = await liveAddress(params)
      if (errorCode === 0) {
        this.accessToken = data.accessToken
        this.livenessUrl = data.url
        this.createPlayer(
          'video-container',
          this.serialno,
          this.accessToken
        )
        // this.player = new EZUIKit.EZUIPlayer('myPlayer')
      }
    },
    async ptzStart(direction) {
      this.direction = direction
      const params = { direction: this.direction, serialno: this.serialno }
      const { msg } = await ptzStart(params)
      this.$message({ type: 'success', message: msg, showClose: true })
    },
    async ptzStop() {
      const params = { direction: this.direction, serialno: this.serialno }
      const { msg } = await ptzStop(params)
      this.$message({ type: 'success', message: msg, showClose: true })
    },
    async capture() {
      const params = { serialno: this.serialno }
      const { msg } = await capture(params)
      this.$message({ type: 'success', message: msg, showClose: true })
    },
    createPlayer(divID, videoID, token) {
      var player = new EZUIKit.EZUIKitPlayer({
        id: divID, // 视频容器ID
        accessToken: token, // 'at.095hrghi3lb6llbr1qjdjnqjdrqz817w-3k6gvgee40-1uwa2op-thzhivp8s',
        url: 'ezopen://open.ys7.com/' + videoID + '/1.live',
        template: 'security', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        autoplay: false,
        // 视频上方头部控件
        header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
        // 视频下方底部控件
        footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        plugin: ['talk'], // 加载插件，talk-对讲
        openSoundCallBack: (data) => console.log('开启声音回调', data),
        closeSoundCallBack: (data) => console.log('关闭声音回调', data),
        startSaveCallBack: (data) => console.log('开始录像回调', data),
        stopSaveCallBack: (data) => console.log('录像回调', data),
        capturePictureCallBack: (data) => console.log('截图成功回调', data),
        fullScreenCallBack: (data) => console.log('全屏回调', data),
        getOSDTimeCallBack: (data) => console.log('获取OSDTime回调', data),
        handleSuccess: (data) => {
          console.log('播放成功回调', data)
        },
        handleError: (data) => console.log('播放失败回调', data),
        width: 500,
        height: 375
      })
      this.player = player
      return player
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display:flex;
  width:100%;
  background-color: #fafafa;
  min-height: 100%;
  text-align:center;
}
#video-container{
  width:500px;
  height:375px;
}
.vjs-custom-skin{
  width:640px;
  height:640px;
}
.control-board{
  display:flex;
  flex-direction:column;
  flex:auto;
  margin-left:32px;
  justify-content: center;
}
.btn{
  width:64px;
  height:64px;
  border:none;
  &-top {
    margin:0 64px;
    border-radius:4px 4px 0 0;
  }
  &-middle{
    &-left{
      margin:0;
      border-radius:4px 0 0 4px;
    }
    &-center{
      margin:0;
      border-radius:0;
    }
    &-right{
      margin:0;
      border-radius:0 4px 4px 0;
    }
  }
  &-bottom{
    margin:0 64px;
    border-radius:0 0 4px 4px;
  }
}
</style>
